<template>
	<view class="pages">
		<view class="top">
			<image class="img1" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/fs2.png" mode=""></image>
			<view class="top_text">
				<view class="ts">
					我们珍视每一份愿意投入时间、 分享热忱的申请。
					<view class="" style="margin-top: 50rpx">请用几分钟填写以下信息， 这将是彼此了解的重要一步。</view>
				</view>
				<image class="img2" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/fs1.png" mode=""></image>
			</view>
		</view>
		<view class="block b1">
			<view class="title">1.基本信息</view>
			<view class="zy flex">
				<view class="z">姓名</view>
				<view class="y">
					<input v-model="params.name" :adjust-position='false' type="text" placeholder="请输入你的姓名" placeholder-class="input_text_s" cursor-spacing="20"/>
				</view>
			</view>
			<view class="zy flex">
				<view class="z">所在城市</view>
				<view class="y">
					<input v-model="params.city" :adjust-position='false' type="text" placeholder="请输入你的所在城市" placeholder-class="input_text_s" cursor-spacing="20"/>
				</view>
			</view>
			<view class="zy flex">
				<view class="z">联系电话</view>
				<view class="y">
					<input v-model="params.phone" :adjust-position='false' maxlength="11" type="number" placeholder="请输入你的联系电话" placeholder-class="input_text_s" cursor-spacing="20"/>
				</view>
			</view>
		</view>

		<view class="block">
			<view class="title">2.个人情况</view>
			<view class="subtitle">目前身份</view>
			<view class="radioList">
				<view class="radios flex" v-for="(item, index) in data.typeList" :key="index" @click="handleSingleSelect(data.typeList, index)">
					<image v-if="item.active" src="/static/select_a.png" mode=""></image>
					<image v-else src="/static/select.png" mode=""></image>
					<view class="ts flex" :class="item.active ? 'actts' : ''">
						{{ item.name }}
						<view class="inputs" v-if="item.name == '其他'">
							<input v-model="params.f2v" :adjust-position='false' type="text" placeholder="请输入" placeholder-class="input_text_s" />
						</view>
					</view>
				</view>
			</view>
			<view class="b_input flex">
				<view class="t1">职业/专业</view>
				<view class="" style="flex: 1; margin-left: 15rpx">
					<input v-model="params.f2o" :adjust-position='false' type="text" placeholder="请输入" placeholder-class="input_text_s" />
				</view>
			</view>
		</view>

		<view class="block">
			<view class="title">3.参与动机</view>
			<view class="subtitle">
				<text>[多选]</text>
				你为什么想成为分社长？
			</view>
			<view class="radioList">
				<view class="radios flex" v-for="(item, index) in data.typeList1" :key="index" @click="handleMultiSelect(data.typeList1, index)">
					<image v-if="item.active" src="/static/select_a.png" mode=""></image>
					<image v-else src="/static/select.png" mode=""></image>
					<view class="ts flex" :class="item.active ? 'actts' : ''">
						{{ item.name }}
						<view class="inputs" v-if="item.name == '其他'">
							<input v-model="params.f3v" :adjust-position='false' type="text" placeholder="请输入" placeholder-class="input_text_s" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="block">
			<view class="title">4.时间投入</view>
			<view class="subtitle">预计每周可投入时长</view>
			<view class="radioList">
				<view class="radios flex" v-for="(item, index) in data.typeList2" :key="index" @click="handleSingleSelect(data.typeList2, index)">
					<image v-if="item.active" src="/static/select_a.png" mode=""></image>
					<image v-else src="/static/select.png" mode=""></image>
					<view class="ts flex" :class="item.active ? 'actts' : ''">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="" style="width: 100%; height: 1rpx; border-bottom: 1px solid #d1d1d6; margin-top: 30rpx"></view>
			<view class="subtitle">通常方便的时间段</view>
			<view class="radioList">
				<view class="radios flex" v-for="(item, index) in data.typeList3" :key="index" @click="handleSingleSelect(data.typeList3, index)">
					<image v-if="item.active" src="/static/select_a.png" mode=""></image>
					<image v-else src="/static/select.png" mode=""></image>
					<view class="ts flex" :class="item.active ? 'actts' : ''">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>

		<view class="block">
			<view class="title">5.相关经验</view>
			<view class="subtitle">请简要描述你过去在社群运营、活动组织或内容创作等方面的经验（如无经验请填“无”）</view>
			<view class="textarea">
				<textarea v-model="params.f5" :adjust-position='false' placeholder="请输入" placeholder-class="input_text_s" maxlength="248"></textarea>
				<view class="num">{{ params.f5.length }}/248</view>
			</view>
		</view>

		<view class="block">
			<view class="title">6.兴趣与资源</view>
			<view class="subtitle">
				<text>[多选]</text>
				你擅长或感兴趣的活动类型
			</view>
			<view class="radioList flex" style="flex-wrap: wrap">
				<view
					class="radios flex"
					:style="{ width: item.name == '其他' ? '100%' : '50%' }"
					v-for="(item, index) in data.typeList4"
					:key="index"
					@click="handleMultiSelect(data.typeList4, index)"
				>
					<image v-if="item.active" src="/static/select_a.png" mode=""></image>
					<image v-else src="/static/select.png" mode=""></image>
					<view class="ts flex" :class="item.active ? 'actts' : ''">
						{{ item.name }}
						<view class="inputs" v-if="item.name == '其他'">
							<input v-model="params.f6v" :adjust-position='false' type="text" placeholder="请输入" placeholder-class="input_text_s" />
						</view>
					</view>
				</view>
			</view>
			<view class="" style="width: 100%; height: 1rpx; border-bottom: 1px solid #d1d1d6; margin-top: 30rpx"></view>
			<view class="subtitle">你是否拥有本地场地、社群等方面资源？如有请简述</view>
			<view class="textarea">
				<textarea v-model="params.f6o" :adjust-position='false' placeholder="请输入" placeholder-class="input_text_s" maxlength="248"></textarea>
				<view class="num">{{ params.f6o.length }}/248</view>
			</view>
		</view>
		<view class="block">
			<view class="title">7.初步设想</view>
			<view class="subtitle">如果成为分社长，你最想做的第一件事是什么？</view>
			<view class="textarea">
				<textarea v-model="params.f7" :adjust-position='false' placeholder="请输入" placeholder-class="input_text_s" maxlength="248"></textarea>
				<view class="num">{{ params.f7.length }}/248</view>
			</view>
		</view>
		<view class="block">
			<view class="title">8.对「稻浪同歌」的理解</view>
			<view class="subtitle">请用一句话描述你心中的“稻浪同歌”</view>
			<view class="textarea">
				<textarea v-model="params.f8" :adjust-position='false' placeholder="请输入" placeholder-class="input_text_s" maxlength="248"></textarea>
				<view class="num">{{ params.f8.length }}/248</view>
			</view>
		</view>
		<view class="block">
			<view class="title">9.期待收获</view>
			<view class="subtitle">你希望通过这份经历，收获哪些方面的成长或回报？</view>
			<view class="textarea">
				<textarea v-model="params.f9" :adjust-position='false' placeholder="请输入" placeholder-class="input_text_s" maxlength="248"></textarea>
				<view class="num">{{ params.f9.length }}/248</view>
			</view>
		</view>
		<view class="bottom_text">
			<image src="/static/lll.png" mode=""></image>
			<view class="tss">
				<view class="">感谢你的认真填写。</view>
				<view class="">我们将在5个工作日内回复每一份申请，</view>
				<view class="">无论结果如何，都会给予明确答复。</view>
			</view>
			<image src="/static/rrr.png" mode=""></image>
		</view>

		<view class="tsy">
			<image src="/static/blogin.png" mode=""></image>
			<view class="">— 期待与你相遇，共耕一片温暖、自由、丰盈的人生田野 —</view>
		</view>
		<view class="btn_zw"></view>
		<view class="bottom_btns">
			<view class="cont">
				<view class="onebtns active" @click="submitComment">提交</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, watch } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { toast } from '@/utils/common';
import { applyGroup } from '@/api/about.js';
const data = reactive({
	typeList: [
		{
			name: '上班族',
			active: false
		},
		{
			name: '自由职业',
			active: false
		},
		{
			name: '大学生',
			active: false
		},
		{
			name: '宝妈/宝爸',
			active: false
		},
		{
			name: '退休人士',
			active: false
		},
		{
			name: '其他',
			active: false
		}
	],
	typeList1: [
		{
			name: '希望获得一份有意义的副业',
			active: false
		},
		{
			name: '渴望结识同频伙伴，拓展社交圈',
			active: false
		},
		{
			name: '热爱运营，享受策划活动的过程',
			active: false
		},
		{
			name: '希望突破现状，尝试新的生活可能',
			active: false
		},
		{
			name: '其他',
			active: false
		}
	],
	typeList2: [
		{
			name: '5-8小时',
			active: false
		},
		{
			name: '8-12小时',
			active: false
		},
		{
			name: '12小时以上',
			active: false
		}
	],
	typeList3: [
		{
			name: '工作日晚上',
			active: false
		},
		{
			name: '周末',
			active: false
		},
		{
			name: '时间灵活，可协调',
			active: false
		}
	],
	typeList4: [
		{
			name: '读书交流',
			active: false
		},
		{
			name: '亲子活动',
			active: false
		},
		{
			name: '城市探索',
			active: false
		},
		{
			name: '公益实践',
			active: false
		},
		{
			name: '手作体验',
			active: false
		},
		{
			name: '文化沙龙',
			active: false
		},
		{
			name: '其他',
			active: false
		}
	]
});
const params = reactive({
	name: '', // 名字
	city: '', // 城市
	phone: '', // 手机
	f2k: '', // 选项
	f2v: '', // 选择“其他”时填写内容
	f2o: '', // 职业/专业
	f3k: '', // 选项，多选时拼接
	f3v: '', // 选择“其他”时填写内容
	f4k: '', // 选项
	f4o: '', // 选项
	f5: '', // 相关经验
	f6k: '', // 选项
	f6v: '', // 选择“其他”时填写内容
	f6o: '', // 简述
	f7: '', // 初步设想
	f8: '', // 理解
	f9: '' // 收获
});
// 检查是否有"其他"选项被选中
const isOtherSelected = (list) => {
	return list.some((item) => item.name === '其他' && item.active);
};
// 单选处理
const handleSingleSelect = (list, index) => {
	const currentItem = list[index];
	const hasOtherSelected = isOtherSelected(list);

	// 如果当前选中的是"其他"，直接切换状态
	if (currentItem.name === '其他') {
		// 单选逻辑：先取消所有选中，再选中当前项
		list.forEach((item) => (item.active = false));
		currentItem.active = true;
	}
	// 如果从"其他"切换到普通选项
	else if (hasOtherSelected) {
		// 取消所有选中，选中当前项
		list.forEach((item) => (item.active = false));
		currentItem.active = true;
		// 清空"其他"对应的输入值（根据列表类型匹配参数）
		clearOtherInput(list);
	}
	// 普通单选切换
	else {
		list.forEach((item) => (item.active = false));
		currentItem.active = true;
	}
	// 更新选中参数
	updateSelectParams(list);
};
// 多选处理（优化版）
const handleMultiSelect = (list, index) => {
	const currentItem = list[index];
	const otherItem = list.find((item) => item.name === '其他'); // 找到“其他”选项
	const hasOtherSelected = otherItem?.active; // “其他”是否被选中
	// 点击的是“其他”选项
	if (currentItem.name === '其他') {
		// 切换“其他”的选中状态
		currentItem.active = !currentItem.active;
		if (currentItem.active) {
			// 选中“其他”时：取消所有普通选项的选中状态
			list.forEach((item) => {
				if (item.name !== '其他') item.active = false;
			});
		} else {
			// 取消“其他”时：清空对应的输入值
			clearOtherInput(list);
		}
	}
	// 点击的是普通选项（非“其他”）
	else {
		console.log('222222');
		// 如果“其他”已选中，此时点击普通选项需要：
		if (hasOtherSelected) {
			// 1. 取消“其他”的选中状态
			otherItem.active = false;
			// 2. 清空“其他”输入值
			clearOtherInput(list);
			// 3. 选中当前普通选项
			currentItem.active = true;
		} else {
			// “其他”未选中时：正常切换普通选项的选中状态
			currentItem.active = !currentItem.active;
		}
	}

	// 更新选中参数（同步到params）
	updateSelectParams(list);
};
// 更新选中参数
const updateSelectParams = (list) => {
	// 根据不同列表更新对应参数
	if (list === data.typeList) {
		params.f2k = list.find((item) => item.active)?.name || '';
		// 如果不是其他选项，清空其他输入
		if (params.f2k !== '其他') params.f2v = '';
	} else if (list === data.typeList1) {
		// 多选拼接
		params.f3k = list
			.filter((item) => item.active)
			.map((item) => item.name)
			.join(',');
		// 如果没有选中其他，清空其他输入
		if (!list.some((item) => item.name === '其他' && item.active)) {
			params.f3v = '';
		}
	} else if (list === data.typeList2) {
		params.f4k = list.find((item) => item.active)?.name || '';
	} else if (list === data.typeList3) {
		params.f4o = list
			.filter((item) => item.active)
			.map((item) => item.name)
			.join(',');
	} else if (list === data.typeList4) {
		params.f6k = list
			.filter((item) => item.active)
			.map((item) => item.name)
			.join(',');
		if (!list.some((item) => item.name === '其他' && item.active)) {
			params.f6v = '';
		}
	}
};
// 根据列表类型清空对应的"其他"输入值
const clearOtherInput = (list) => {
	if (list === data.typeList) {
		params.f2v = ''; // 个人情况-其他输入
		console.log(params.f2v, '--------');
	} else if (list === data.typeList1) {
		params.f3v = ''; // 参与动机-其他输入
	} else if (list === data.typeList4) {
		params.f6v = ''; // 兴趣类型-其他输入
	}
};
// 表单验证
const validateForm = () => {
	// 基本信息验证
	if (!params.name.trim()) return '请输入姓名';
	if (!params.city.trim()) return '请输入所在城市';
	if (!params.phone.trim()) return '请输入联系电话';
	if (!/^1[3-9]\d{9}$/.test(params.phone)) return '请输入正确的手机号';

	// 个人情况验证
	if (!params.f2k) return '请选择目前身份';
	if (params.f2k === '其他' && !params.f2v.trim()) return '请输入其他身份';
	if (!params.f2o.trim()) return '请输入职业/专业';

	// 参与动机验证
	if (!params.f3k) return '请选择参与动机';
	if (params.f3k.includes('其他') && !params.f3v.trim()) return '请输入其他动机';

	// 时间投入验证
	if (!params.f4k) return '请选择每周可投入时长';
	if (!params.f4o) return '请选择方便的时间段';

	// 其他项验证
	if (!params.f5.trim()) return '请填写相关经验';
	if (!params.f6k) return '请选择擅长或感兴趣的活动类型';
	if (params.f6k.includes('其他') && !params.f6v.trim()) return '请输入其他活动类型';
	if (!params.f7.trim()) return '请填写初步设想';
	if (!params.f8.trim()) return '请描述对「稻浪同歌」的理解';
	if (!params.f9.trim()) return '请填写期待收获';

	return true;
};
// 提交表单
const submitComment = async () => {
	const validateResult = validateForm();
	if (validateResult !== true) {
		toast(validateResult);
		return;
	}
	applyGroup(params).then((res) => {
		if (res.code == 200) {
			uni.navigateTo({
				url: '/mypage/more/withdrawYes?title=申请完成'
			});
		}
	});
};
</script>
<style lang="scss" scoped>
.pages {
	background: linear-gradient(180deg, #ece6d5 0%, #fbfcf9 86%);
	height: 100vh;
	overflow: auto;
}
.top {
	.img1 {
		width: 664rpx;
		height: 76rpx;
		display: block;
		margin: 20rpx auto;
	}

	.top_text {
		width: 750rpx;
		padding: 0rpx 0rpx 0rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		.ts {
			width: 388rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
		}
		.img2 {
			width: 322rpx;
			height: 304rpx;
		}
	}
}
.b1 {
	margin-top: -50rpx !important;
}
.block {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	border: 1px solid #ffffff;
	margin: 0rpx auto 20rpx;
	position: relative;
	padding: 32rpx 20rpx;
	box-sizing: border-box;
	.title {
		height: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		background: linear-gradient(0deg, #75613e 0%, #dbb674 100%);
		/* 将背景裁剪到文字区域 */
		-webkit-background-clip: text; /* 兼容 Safari/Chrome 等webkit内核浏览器 */
		background-clip: text;
		/* 将文字颜色设为透明，显示背景渐变 */
		-webkit-text-fill-color: transparent; /* 兼容webkit内核 */
		text-fill-color: transparent;
	}
	.subtitle {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #75613e;
		margin: 30rpx auto;
		text {
			color: #31a0fe;
		}
	}
	.zy {
		border-bottom: 1px solid #d1d1d6;
		margin-top: 40rpx;
		padding-bottom: 20rpx;
		.z {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
			width: 150rpx;
		}
		.y {
			flex: 1;
			input {
				width: 100%;
				height: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000;
				line-height: 40rpx;
			}
		}
	}
	.zy:last-child {
		padding: 0%;
		border: none;
	}

	.radioList {
		.radios {
			margin-bottom: 30rpx;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 15rpx;
			}
			.ts {
				flex: 1;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #8f8f8b;
			}
			.inputs {
				flex: 1;
				height: 44rpx;
				background: #f7f7f7;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-left: 15rpx;
				padding: 0rpx 12rpx;
				input {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000;
				}
			}
			.actts {
				color: #b19561;
			}
		}
		.radios:last-child {
			margin: 0%;
		}
	}
	.b_input {
		margin-top: 30rpx;
		border-top: 1px solid #d1d1d6;
		padding-top: 30rpx;
		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
		}
		input {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000;
		}
	}
	.textarea {
		height: 200rpx;
		background: #f7f7f7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		position: relative;
		textarea {
			width: 100%;
			height: 200rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000;
			padding: 16rpx 20rpx;
			box-sizing: border-box;
		}
		.num {
			position: absolute;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #aeaeac;
			bottom: 10rpx;
			right: 10rpx;
		}
	}
}

.bottom_text {
	width: 710rpx;
	margin: 40rpx auto;
	padding: 24rpx 20rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	background: #ffffff;
	border-radius: 20rpx;
	image {
		width: 58rpx;
		height: 72rpx;
		margin-top: 40rpx;
	}
	.tss {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #75613e;
		text-align: center;
	}
}
.tsy {
	text-align: center;
	margin-bottom: 30rpx;
	image {
		width: 200rpx;
		height: 64rpx;
	}
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #8f8f8b;
}
</style>
